<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="800" height="600"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');

        ctx.moveTo(100, 100);
        ctx.lineTo(200, 200);
        ctx.lineTo(100, 300);
        // ctx.lineWidth = '20'

        ctx.moveTo(400, 400);
        // 使用lineWidth设置线条的宽度，注意单位是数值形式默认px，不要自己加单位。且lineWidth不设置默认为1px
        ctx.lineWidth = 3;

        /*
            使用lineCap设置线条的端点样式
            butt(默认)平齐、round半圆、square正方形、
        */
        ctx.lineCap = 'round';

        /*
            使用lineJoin设置两条线短连接处的样式
                mitter(默认)尖锐、round圆润也就是角被磨圆了、bevel把角磨平也就是把尖锐的角砍掉了
                注意，当设置为mitter时，ctx还有一个属性mitterLimit可以被设置，代表超过这个值的角的部分将会被磨平;
        */
        ctx.lineJoin = 'round';

        /*
            使用setLineDash设置线条为虚线
            方法需要传入一个数组，其中包括两个数字，第一个为线的长度，第二个为空白处的长度。因为虚线就是一段是线一段是空白的。
            不过要注意，线条的粗细会影响最终空白处的实际效果，比如你把线条宽度设为10，那么空白设为10就跟看不到一样。
        */
        ctx.setLineDash([20, 10])
        // lineDashOffset可以设置偏移量，就相当于把这条线向绘制的反方向拽一段距离，只是样式会不同，位置不会变。
        ctx.lineDashOffset = 10;
        ctx.stroke();
    </script>
</body>

</html>